<template>
  <div id='app'>
    
<div class="header">
  <!-- 轮播图 -->
 <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="(c,i) in banner" :key="i"><img :src="c.picUrl" alt=""></van-swipe-item>

</van-swipe>
    <!-- 轮播图 -->
    <!-- top列表下 -->
    <ul class="Top-list">
      <li v-for="(c,i) in list" :key="i" @click="sign(i)">
        <van-icon :name="c.img"  size="2.5rem" />
        <p>{{c.title}}</p>
      </li>
    </ul>

    <!-- top列表下 -->
</div>
<div class="section"></div>
<!-- 全名砍价 -->
<div class="qxkj">
  <h3 @click="bargain">全民砍价</h3>
  <van-card
  num="200件"
  price="0.9"
  desc="男式羊羔绒休闲外套"
  title="仿羊绒内里，却有真实安全感"
  thumb="https://dcdn.it120.cc/2019/07/24/a30b67dd-61be-41bd-841c-7e3f8844e958.jpg"
  origin-price="1.00"
  @click="bargain"
/>
</div>
<!-- 全名砍价 -->

<!-- 精选专题 -->
<div class="Selected-topics">
  <h3 @click="special">精选专题</h3>
 <ul>
   <li v-for="(c,i) in Selected" :key="i" @click="cms(c)">
     <img :src="c.pic" alt="">
     <p>{{c.title}}</p>
          <p>{{c.descript}}</p>
   </li>
 </ul>
</div>
<!-- 精选专题 -->
<!-- 人气 -->
<div class="renqi">
  <h3 @click="rq">
    人气推荐
  </h3>
  <ul>
    <li v-for="(c,i) in kanjialist" :key="i" @click="detail(c)">
      <img :src="c.pic" alt="">
      <p>{{c.name}}</p>
      <p>{{c.characteristic}}</p>
      <p >￥{{c.minPrice}}</p>
    </li>
  </ul>

</div>
<!-- 人气 -->

   
   

  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
       ...this.$listAll.listHome
      ],
      banner:[],
      Selected:[],
      kanjialist:[],
    }
  },
  methods: {
    gtelist(){
      this.$request.gtelist().then(res=>{
        this.banner=res.data.data
      })
    },
    get(){
      this.$request.gteDist({
        code:'2'
      }).then(res=>{
       
        this.Selected=res.data.data

      })
    },
    getGET(){
      this.$request.kanjialist().then(res=>{
        this.kanjialist=res.data.data.goodsMap
        console.log(res.data.data.goodsMap);

      })
    },
    sign(i){
      if(i==0){
        this.$router.push(this.$routerConfig.sign.path)
      }else if(i==1){
        this.$router.push(this.$routerConfig.gift.path)

      }else if(i==2){
        this.$router.push(this.$routerConfig.bargain.path)

      }else if(i==3){
        this.$router.push(this.$routerConfig.special.path)

      }
    
      
    },
    bargain(){
        this.$router.push(this.$routerConfig.bargain.path)

    },
    special(){
        this.$router.push(this.$routerConfig.special.path)

    },
    rq(){
        this.$router.push(this.$routerConfig.rq.path)

    },
    cms(c){
        this.$router.push(
          {
            path:this.$routerConfig.cms.path,
            query:{c}
          })

     
    },
    detail(c){
        this.$router.push(
          {
            path:this.$routerConfig.detail.path,
            query:{
              id:c.id,
              pic:c.pic,
              name:c.name,
              characteristic:c.characteristic,
              minPrice:c.minPrice,
              }

          }
          
          
          
          )

    }


   
   
    

  },
  mounted() {
    this.gtelist()
    this.get()
    this.getGET()
  

  },
  components: {

  }
}
</script>

<style lang='scss' >
.qxkj{
  width: 100%;
  display: flex;
  flex-direction: column;
  h3{
    text-align: center;
    margin: 10px 0;

  }
}

.renqi{
  width: 100%;
  display: flex;
  flex-direction: column;
  h3{
    text-align: center;
  margin:20px 0 ;

  }
  ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
    li{
      width: 45%;
      display: flex;
      flex-direction: column;

    }
    img{
      width: 100%;
      height: 200px;
    }
    p{
      width: 100%;
      overflow: hidden;
       text-overflow: ellipsis;
      white-space: nowrap;
    }
    p:nth-child(3){
      color: #ccc;
      font-size: 12px;
    }

    p:nth-child(4){
      color: red;
    }
    
  }

}

.Selected-topics{
  width: 100%;
  height: 325px;
  display: flex;
  flex-direction: column;
  
  h3{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
  }
  ul{
    height: 100%;
    overflow: auto;
    display: flex;

    li{
      width: 80%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin: 0 20px;

    }
    
    img{
      width: 100%;
      height: 200px;
      border-radius:10px ;


    }
    p{
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 10px;

    }

  }

}
.header{
  width: 100%;
  position: relative;
  background-color: #ccc;
}
.my-swipe{
  width: 100%;
  img{
    width: 100%;
    height: auto;
  }
}
.Top-list{
  width: 100%;
  height: 90px;
  background-color: #fff;
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-radius:20% 20% 0 0 ;
  position: absolute;
  top: 80%;
  
 

  li{
    width: 25%;
    height: 100%;
     display:flex;
     flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  }

}
.section{
  width: 100%;
  height: 20px;
  margin-top:30px ;
  background-color: #F5F5F5;
}

</style>
